<template>
    <div class="container">
        <header class="header">
            <img src="@/assets/imgs/home/text.png" class="text" alt="">
            <div class="tips">
                {{ time }}
            </div>
            <img src="@/assets/imgs/home/henxian.png" class="line1" alt="">
        </header>

        <div class="box">
            <main class="main">
                <div class="item" v-for="i in models" @click="handleClick(i)">
                    <div class="title">{{ i.name }}</div>
                    <div class="img-box">
                        <img src="@/assets/imgs/home/demo.png" class="img" alt="">
                    </div>
                </div>
            </main>
            <aside class="aside">
                <img src="@/assets/imgs/home/shuxian.png" class="line1" alt="">
                <div class="content">
                    <el-input v-model="searchValue" class="search" placeholder="地区">
                        <template #prefix>
                            <span style="color: white;">搜索&nbsp;|</span>
                        </template>
                    </el-input>
                    <div class="tree-box">
                        <el-tree ref="treeRef" :data="tree" :props="defaultProps" default-expand-all
                            :filter-node-method="filterNode" class="tree">
                        </el-tree>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</template>


<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { dayjs } from 'element-plus';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
import modelDatas from "@/assets/json/model.json";

console.log("modelDatas", modelDatas);

const models = modelDatas.model
const router = useRouter()
const time = ref(dayjs().format('YYYY/MM/DD dddd HH:mm:ss')); // 初始值
let timer = null;
const searchValue = ref('')
const defaultProps = {
    children: 'children',
    label: 'name',
}
const treeRef = ref()
const tree = ref([
    {
        id: '0',
        name: '318国道',
        children: [
            {
                id: 1,
                name: '上海',
                children: []
            },
            {
                id: 2,
                name: '江苏',
                children: []
            },
            {
                id: 3,
                name: '浙江',
                children: [
                    { id: 31, name: '嘉兴', },
                    { id: 32, name: '长兴', }
                ]
            }
        ]
    }
])

const filterNode = (value, data) => {
    if (!value) return true
    return data.name.includes(value)
}
watch(searchValue, (val) => {
    treeRef.value.filter(val)
})

const handleClick = (item) => {
    console.log("item", item);
    router.push({
        path: '/three',
        query: {
            name: item.name
        }
    })
}

onMounted(() => {
    timer = setInterval(() => {
        time.value = dayjs().format('YYYY/MM/DD dddd HH:mm:ss');
    }, 1000);
});

onUnmounted(() => {
    if (timer) clearInterval(timer);
});
</script>

<style scoped lang="scss">
.container {
    background-image: url('@/assets/imgs/home/map.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    --height: 55px;

    .header {
        height: var(--height);
        position: relative;
        text-align: center;


        .tips {
            position: absolute;
            bottom: 0px;
            right: 20px;
            font-size: 16px;
            color: white;
        }

        .line1 {
            width: 100%;
        }


    }

    .box {
        display: flex;
        height: calc(100% - var(--height));
        padding: 30px 0px 10px 10px;
        overflow: hidden;

        .main {
            flex: 4;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            flex: 4;
            box-sizing: border-box;


            overflow-y: scroll;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
            }

            .item {
                cursor: pointer;
                width: 100%;
                height: 373px;
                background-image: url('@/assets/imgs/home/bg.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;

                .title {
                    padding: 0px 10px;
                    color: white;
                    line-height: 50px;
                    height: 50px;
                }

                .img-box {
                    width: 98%;
                    height: calc(100% - 85px);

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .aside {
            flex: 1;
            height: 100%;
            overflow: hidden;
            display: flex;
            padding-top: 10px;

            .line1 {
                height: 105%;
            }

            .content {
                width: 100%;

                .search {
                    width: 100%;

                    :deep(.el-input__wrapper) {
                        background: #3B3F4E;
                    }

                }

                .tree-box {
                    margin-top: 10px;
                    --el-fill-color-blank: transppaent;
                    --el-fill-color-light: #535D7F;
                    --el-font-size-base: 16px;
                    --el-text-color-secondary: white;
                    --el-text-color-placeholder: white;

                    :deep(.el-tree) {
                        .el-tree-node {
                            margin-top: 5px;
                        }

                        .el-icon {
                            font-size: 30px;
                        }
                    }
                }
            }

        }
    }
}
</style>